import React, { useEffect, useRef, useState, useMemo, useContext } from 'react';
import { SchemaManage } from '@/components/SchemaComponent';
import { connect } from 'umi';
import { AssetDisposeManageAPI } from '../common/type';
import { getTableColumns } from '../mconfig';
import { MaterialManageServices } from '../services';
import { AssetDisponseManageContext } from '../mconfig/useManageContext';

const StatisticTableManageView: React.FC<AssetDisposeManageAPI.IMaterialManageView> = ({ curRes }) => {
  /**管理页services*/
  const { data, loading, searchList, pagination, reloadRequest, manageTableParams } = MaterialManageServices(curRes);

  /**
   * 获取上下文
   */
  const {
    // 表格数据及参数
    rightTableProps: { dataSource },
  } = useContext(AssetDisponseManageContext);

  /**管理页的ref*/
  const MaterialManageViewRef: any = useRef();

  /**切换头部方法*/
  const onSwitch = (key: string | undefined | number, searchValues: any, params: any) => {
    reloadRequest({ ...params, ...searchValues });
  };

  /**重置方法*/
  const onReset = (reqParams: AssetDisposeManageAPI.IAssetTableRequestType) => {
    // reloadRequest({ ...reqParams });
  };

  /**搜索方法*/
  const onSearch = (reqParams: AssetDisposeManageAPI.IAssetTableRequestType) => {
    // reloadRequest({ ...reqParams });
  };

  /**刷新管理页面的办法*/
  const reloadManage = () => {
    // reloadRequest({ ...manageTableParams });
  };

  /**分页方法*/
  const onPageChange = (current: any, pageSize: any, params: any) => {
    // reloadRequest({ pageSize, current, ...params });
  };

  /**Table的columns集合*/
  const getTableColumn: Record<string, any>[] = useMemo(() => {
    return getTableColumns(curRes);
  }, [curRes]);

  return (
    <>
      <div
        id={'custom-preview-container'}
        style={{
          position: 'relative',
          overflow: 'hidden',
          height: '100%',
          width: '100%',
        }}
      >
        <SchemaManage
          ref={MaterialManageViewRef}
          searchProps={{
            switchList: [], //头部切换列表
            searchList,
            onSwitch,
            onReset,
            onSearch,
          }}
          actionList={[]} // 操作按钮
          tableProps={{
            columns: getTableColumn,
            // dataSource: data?.rows, //mockData
            dataSource: dataSource,
            rowKey: 'id',
            loading: loading,
            pagination: pagination as any,
            onPageChange: onPageChange,
          }}
        />
      </div>
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(StatisticTableManageView);
